<template>
	<view>
		<Navbar></Navbar>
		<view class="u-m-30 u-form-box">
			<u-form :model="form" label-width="160" ref="uForm">
				<!-- <u-form-item required label="酒局省市区">
					<view class="u-text-right" :class="provinceFullText ? '' : 'u-color-gray'" @click="openProvince">
						{{ provinceFullText || '请选择省市区 >'}}
					</view>
				</u-form-item> -->
				<u-form-item required label="场地名称">
					<u-input placeholder="请输入场地名称" input-align="right" v-model="form.address_name" />
				</u-form-item>
				<u-form-item required label="场地地址">
					<view class="u-text-right u-text-line-15" :class="form.address ? '' : 'u-color-gray'" @click="chooseAddress">
						{{ form.address || '办公园区/写字楼等'}}
					</view>
				</u-form-item>
				<u-form-item required label="门牌号">
					<u-input :disabled="addressId ? true : false" placeholder="请输入门牌号" input-align="right" v-model="form.doorplate" />
				</u-form-item>
				<!-- <u-form-item required label="场地类型">
					<view class="u-text-right u-text-line-15" :class="form.address ? '' : 'u-color-gray'" @click="commonPopup.show = true">
						{{ adressObj.name || '请选择场地类型'}}
					</view>
				</u-form-item> -->
				
				<view>
					<u-field class="u-width-100" :border-bottom="false" label="场地类型" :required="true" input-align="right"
						label-width="280" :disabled="true">
						<view slot="right" class="u-text-right u-text-line-15" :class="adressObj.name ? '' : 'u-color-gray'" @click="commonPopup.show = true">
							{{ adressObj.name || '请选择场地类型'}}
						</view>
					</u-field>
					<view @click="signUpData.show = true" class="u-flex font396" v-if="adressObj.id == 0">
						<u-icon class="quesIcon" name="question-circle" size="26" color="#ee2424"></u-icon>
						<view class="u-font-24 u-p-l-10">点击查看签约场地说明</view>
					</view>
				</view>
				<u-form-item required label="有效期至" v-if="adressObj.id == 1">
					<view class="u-text-right u-text-line-15" :class="validity.result ? '' : 'u-color-gray'">
						{{ validity.result }}
					</view>
				</u-form-item>
				<u-form-item required label="场地提供人">
					<!-- <u-input placeholder="请输入场地提供人姓名" input-align="right" v-model="form.name" /> -->
					<view class="u-text-right u-text-line-15 reference_name" :class="reference.name ? '' : 'u-color-gray'" @click="openReference">
						{{ reference.name || '请选择场地提供人 >'}}
					</view>
				</u-form-item>
				<u-form-item required label-position="top" label="大楼外观">
					<u-upload :file-list="addressId ? fileBuildList : undefined" :action="action" max-count="4" width="120" height="120" :show-progress="false"
						image-mode="widthFix" @on-success="onBuildSuccess" @on-remove="onBuildRemove" :before-upload="beforeUpload"></u-upload>
				</u-form-item>
				<u-form-item required label-position="top" label="场地门头">
					<u-upload :file-list="addressId ? fileHeadList : undefined" :action="action" max-count="4" width="120" height="120" :show-progress="false"
						image-mode="widthFix" @on-success="onHeadSuccess" @on-remove="onHeadRemove" :before-upload="beforeUpload"></u-upload>
				</u-form-item>
				<u-form-item required label-position="top" label="酒局环境">
					<u-upload :file-list="addressId ? fileList : undefined" :action="action" max-count="4" width="120" height="120" :show-progress="false"
						image-mode="widthFix" @on-success="onSuccess" @on-remove="onRemove" :before-upload="beforeUpload"></u-upload>
				</u-form-item>
			</u-form>
		</view>
		
		<view class="u-m-t-20 u-flex u-row-center">
			<u-checkbox-group>
				<u-checkbox v-model="agreement" shape="circle">
					<text class="u-tips-color u-font-24">注册表示同意</text>
					<text @click.native.stop="goAgrement(18)" class="u-type-primary u-font-24">《场地管理协议》</text>
				</u-checkbox>
			</u-checkbox-group>
		</view>
		
		<view style="height: 200rpx;"></view>
		
		<Bottom @confirm="submit"></Bottom> 

		<!-- 省市区 -->
		<UniAddressSelector v-if="showUniAddressSelector" :selectAreaLevelLimit="3" :isSZ="0" @cancel="handleCancel"
			@confirm="handleConfirmArea"></UniAddressSelector>
			
		<!-- 场地提供人 -->
		<u-popup v-model="reference.show" mode="bottom" border-radius="20">
			<view class="checkAddressBox">
				<u-search v-model="reference.keyword" placeholder="请搜索关键词" @search="searchReference" @clear="clearReference" @custom="searchReference"></u-search>
				<scroll-view scroll-y="true" style="height: 700rpx;margin-bottom: 60rpx;" @scrolltolower="loadReference">
					<view class="slot-content">
						<view :class="item.check ? 'address_check_box' : 'address_box'" v-for="item in reference.list" :key="item.id" >
							<view @click="checkReference(item)">{{item.name}}-{{item.phone}}</view>
						</view>
					</view>
				</scroll-view>
				<view class="u-flex">
					<view class="addBtn" @click="reference.show = false">取消</view>
					<view class="bottomBtn" @click="confirmReference">确定</view>
				</view>
			</view>
		</u-popup>
		
		<!-- 通用选择框 -->
		<CommonPopup :popupShow="commonPopup.show" :list="commonPopup.list" @onChooseLabel="onChooseLabel" @popupClose="commonPopup.show = false"></CommonPopup>
		
		<!-- 签约场地介绍 -->
		<u-mask mode="center" mask-click-able="false" :show="signUpData.show">
			<view class="signUpMask">
				<view class="u-back-white u-p-20 u-radius-20" style="width: 80%; height: 70%;">
					<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="signUpScrolltolower">
						<view class="u-font-30 line_height_15 report_content">
							<rich-text :nodes="signUpData.content"></rich-text>
						</view>
					</scroll-view>
					<view class="u-m-t-40 signUpClose" v-if="signUpData.iconShow">
						<u-icon @click="signUpData.show = false" size="50" class="u-p-r-8" color="#fff" name="close-circle" />
					</view>
				</view>	
			</view>
		</u-mask>
		
		<!-- 确认框 -->
		<Modal :show="modal.show" :confirmText="modal.confirmText" :cancelText="modal.cancelText"
			:modalContent="modal.content" :showCancel="modal.showCancel" @confirm="modalConfirm">
		</Modal>
	</view>
</template>

<script>
	import Navbar from '@/components/Navbar.vue'
	import Bottom from '@/components/Bottom.vue'
	import Modal from '@/components/Modal.vue'
	import UniAddressSelector from '@/components/UniAddressSelector.vue'
	import CommonPopup from '../../components/CommonPopup.vue'
	import {
		teaAddressCreate,
		teaAddressDetail,
		teaAddressEdit,
		presidentList
	} from '@/network/tea.js'
	import { getAgreement } from "@/network/api.js"
	import {
		hasEmptyValue,
		formatDate,
		formatContent
	} from '@/utils/index.js'
	import env from '@/network/env.js'
	export default {
		components: {
			Navbar,
			Bottom,
			UniAddressSelector,
			CommonPopup,
			Modal
		},
		data() {
			return {
				addressId: '',
				form: {
					address_name:'',
					address: '', // 关键地址
					complete_address:'', // 完整地址
					doorplate: '',
					user_id: uni.getStorageSync("user_id"),
					longitude: '',
					latitude: '',
				},
				// 场地提供人
				reference: {
					show: false,
					keyword: '',
					list:[],
					page: 1,
					pageSize: 10,
					name: '',
					id: ''
				},
				provinceFullText: '',
				provinceObj: {},
				cityObj: {},
				areaObj: {},
				adressObj: {}, // 场地类型
				validity:{   // 场地有效期
					startTime: '',
					endTime: '',
					result: ''
				},
				imageList: [], // 酒局环境
				buildImageList: [], // 大楼外观
				headImageList: [], // 场地门头
				fileList: [], // 编辑下的酒局环境图片集合
				fileBuildList: [], // 编辑下的大楼外观图片集合
				fileHeadList: [], // 编辑下的场地门头图片集合
				action: `${env.baseUrl}/api/uploadOssImage`,
				showUniAddressSelector: false,
				isBack: false ,// 返回发布酒局页面
				agreement: '',
				commonPopup:{
					show: false,
					list:[
						{id:1,name:'临时场地',check:false},
						{id:0,name:'签约场地',check:false}
					]
				},
				signUpData: {
					show: false,
					iconShow: false,
					content: ''
				},
				modal: {
					show: false,
					showCancel: true,
					confirmText: '',
					cancelText: '',
					content: ''
				},
			}
		},
		onLoad(options) {
			if (options.id) {
				this.addressId = options.id
				this.getAddressData(options.id)
			}
			if(options.isBack){
				this.isBack = options.isBack
			}
			this.getPresidentList()
			this.getSignUpAgreement()
		},
		methods: {
			getSignUpAgreement(){
				getAgreement({
					type: 22
				}).then(res => {
					this.signUpData.content = formatContent(res.data.content)
				})
			},
			signUpScrolltolower(){
				this.signUpData.iconShow = true
			},
			getAddressData(val) {
				teaAddressDetail({
					address_id: val
				}).then(res => {
					let data = res.data.info
					Object.keys(this.form).forEach(key => {
						this.form[key] = data[key]
					})
					this.provinceFullText = `${data.province_name}${data.city_name}${data.area_name}`
					this.provinceObj.id = data.province
					this.cityObj.id = data.city
					this.areaObj.id = data.area
					data.images.map(item=>{
						const params = {
							url: item
						}
						this.fileList.push(params)
						this.imageList.push(item)
					})
					data.building_images.map(item=>{
						const buildParams = {
							url: item
						}
						this.fileBuildList.push(buildParams)
						this.buildImageList.push(item)
					})
					data.head_images.map(item=>{
						const headParams = {
							url: item
						}
						this.fileHeadList.push(headParams)
						this.headImageList.push(item)
					})
					this.reference.name = data.supply_info.name
					this.reference.id = data.supply_info.id
					this.adressObj = {
						id: data.is_temp,
						name: data.is_temp == 1 ? '临时场地' : '签约场地'
					}
					this.validity.startTime = data.start_time
					this.validity.endTime = data.end_time
					this.validity.result = data.end_time.slice(0,10)
				})
			},
			getPresidentList(){
				const params = {
					is_president: 0,
					keyword: this.reference.keyword,
					page: this.reference.page,
					limit: this.reference.pageSize
				}
				presidentList(params).then(res=>{
					res.data.list.map(item=>{
						const params = {
							...item,
							check: false
						}
						this.reference.list.push(params)
					})
				})
			},
			openReference(){
				this.reference.show = true
			},
			searchReference(){
				this.reference.list.length = 0
				this.reference.page = 1
				this.getPresidentList()
			},
			clearReference(){
				this.reference.keyword = ''
				this.reference.list.length = 0
				this.reference.page = 1
				this.getPresidentList()
			},
			loadReference(){
				this.reference.page++
				this.getPresidentList()
			},
			checkReference(val){
				this.reference.list.map(item=>item.check =false)
				val.check = true
			},
			confirmReference(){
				let checkObj = this.reference.list.find(item=>item.check == true)
				this.reference.name = checkObj.name
				this.reference.id = checkObj.id
				this.reference.show = false
			},
			openProvince() {
				this.showUniAddressSelector = true
			},
			chooseAddress() {
				if(!this.addressId){
					let _this = this
					uni.chooseLocation({
						success(res) {
							_this.form.address = `${res.name}`
							_this.form.complete_address = `${res.address}${res.name}`
							_this.form.latitude = res.latitude
							_this.form.longitude = res.longitude
						}
					})
				}
			},
			handleCancel() {
				this.showUniAddressSelector = false
			},
			handleConfirmArea(val) {
				this.showUniAddressSelector = false;
				this.provinceFullText = val.fullAreaText
				this.provinceObj = val.provinceObj
				this.cityObj = val.cityObj
				this.areaObj = val.areaObj
			},
			onChooseLabel(val){
				if(val.id == 0){
					this.validity.startTime = ''
					this.validity.endTime = ''
					setTimeout(()=>{
						this.signUpData.show = true
					},200)
				}else{
					let date = formatDate((new Date().getTime() + 24 * 60 * 60 * 7000) / 1000,true)
					let startDate = formatDate((new Date().getTime()) / 1000,true)
					this.validity.result = date
					this.validity.startTime = `${startDate} 00:00:00`
					this.validity.endTime = `${date} 00:00:00`
				}
				this.adressObj = val
				this.commonPopup.show = false
			},
			onBuildSuccess(val){
				this.buildImageList.push(val.data.url)
			},
			onHeadSuccess(val){
				this.headImageList.push(val.data.url)
			},
			onSuccess(val) {
				this.imageList.push(val.data.url)
			},
			onBuildRemove(val){
				this.buildImageList.splice(val, 1)
			},
			onHeadRemove(val){
				this.headImageList.splice(val, 1)
			},
			onRemove(val) {
				this.imageList.splice(val, 1)
			},
			beforeUpload(index,list){
				uni.showLoading({
					title: "上传中"
				})
			},
			goAgrement(type){
				uni.navigateTo({
					url: '/operate/agreement/agreement?type=' + type
				})
			},
			submit() {
				if(this.agreement){
					const params = {
						...this.form,
						// province: this.provinceObj.id,
						// city: this.cityObj.id,
						// area: this.areaObj.id,
						images: this.imageList.join(","),
						building_images: this.buildImageList.join(","),
						head_images: this.headImageList.join(","),
						supply_id: this.reference.id,
						is_temp: this.adressObj.id
					}
					let requrl = teaAddressCreate
					if(this.addressId){
						requrl = teaAddressEdit
						params.address_id = this.addressId
					}
					if (hasEmptyValue(params)) {
						if(this.adressObj.id == 1){
							params.start_time = this.validity.startTime
						    params.end_time = this.validity.endTime
						}
						requrl(params).then(res => {
							if(this.addressId){
								this.modal.content = '修改成功'
								this.modal.showCancel = false
								this.modal.confirmText = '确定'
								this.modal.show = true
							}else{
								this.modal.content = (this.adressObj.id == 1 ? '添加成功' : '请耐心等待系统审核，审核通过后将有<span class="u-color-red">专人上门</span>核实、签约。请提前准备好<span class="u-color-red">场地使用权</span>的相关资质文件。') 
								this.modal.showCancel = false
								this.modal.confirmText = '确定'
								this.modal.show = true
							}
							
						})
					} else {
						uni.showToast({
							title: "必填项不能为空",
							icon: "none"
						})
					}
				}else{
					uni.showToast({
						icon: "none",
						duration: 2000,
						title: "请先同意场地管理协议"
					})
				}
			},
			modalConfirm(){
				let backUrl = (this.isBack ? '/teaBureau/teaPublish/teaPublish' : '')
				uni.redirectTo({
					url: "/pages/addressList/addressList?backUrl=" + backUrl 
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.checkAddressBox{
		height: 1000rpx;
		padding: 30rpx 30rpx 50rpx 30rpx;
		
		.address_box{
			padding: 20rpx;
			margin-top: 20rpx;
			border-radius: 10rpx;
			background: #FAFAFA;
		}
		
		.address_check_box{
			padding: 20rpx;
			margin-top: 20rpx;
			border-radius: 20rpx;
			background: #fb6316;
			color:#fff;
		}
		
		.addBtn{
			flex:1;
			height: 80rpx;
			background: #fff;
			color: #000;
			border-radius: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
			margin-right: 40rpx;
			border: 1rpx solid #ccc;
		}
		
		.bottomBtn{
			flex:1;
			height: 80rpx;
			background: #fb6316;
			color: #fff;
			border-radius: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
		}
	}
	
	.signUpMask{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	
	.signUpClose{
		position: absolute;
		left: calc(50% - 25rpx);
	}
	
	::v-deep .u-field {
		padding: 20rpx 0 28rpx 0rpx !important;
		border-bottom: 1rpx solid #F4F6F8;
	}
	
	::v-deep .u-label {
		font-size: 30rpx !important;
		font-weight: bold !important;
	}
</style>